<template>
  <div class="materials-content">
          <div class="materialsBox">
                <div class="headerBox">
                      <div class="line"></div>
                      <div class="title">审核改扩材料</div>
                </div>
                <div class="flowBox">
                    <div class="txt1">流程：</div>

                    <div class="flow-item" :class="{flowActive:flowIndex>0}" @click="handleFlow(0)">预评价报告</div>
                    <div class="flow-item" :class="{flowActive:flowIndex>1}" @click="handleFlow(1)"> 
                         <img v-if="flowIndex>1" class="image" src="@/assets/images/right-l.png" alt="">
                         <img v-else class="image" src="@/assets/images/right.png" alt="">
                         <span>防护设施设计审查文件</span>
                    </div>
                    <div class="flow-item" :class="{flowActive:flowIndex>2}" @click="handleFlow(2)">
                       <img v-if="flowIndex>2" class="image" src="@/assets/images/right-l.png" alt="">
                        <img v-else class="image" src="@/assets/images/right.png" alt="">
                       <span>职业危害因素控制效果评估报告</span>
                    </div>
                    <div class="flow-item" :class="{flowActive:flowIndex>3}" @click="handleFlow(3)">
                        <img v-if="flowIndex>3" class="image" src="@/assets/images/right-l.png" alt="">
                        <img v-else class="image" src="@/assets/images/right.png" alt="">
                        <span>竣工验收报告</span>
                    </div>           
                </div>

                <div class="download">
                       <div style="cursor: pointer" v-if="flowItem.documentFileUrl !=''&& flowItem.documentFileUrl !=null && flowItem.documentFileUrl!=undefined" @click="handleDownload">
                           <img class="image" src="@/assets/images/download.png" alt="">
                           <div>下载查看</div>
                       </div>
                </div>

                <div style="margin-top:20px" v-if="!authStatus">
                      <el-button class="btn" type="primary" @click="handleByMeans('1')">审核通过</el-button> 
                      <el-button class="btn" type="danger" @click="handleByMeans('-1')">审核不通过</el-button>       
                </div>
  
               <div class="footer-btn">
                      <el-button class="btn" @click="goBackBtn">返回</el-button>
               </div>
          </div>

  </div>
</template>

<script>
 import { getModifiedMaterial,examineMaterial} from "@/api/zhangping/occupational";
  export default {
    data() {
      return {
       infoData:[],
       flowIndex:0,
       flowItem:{},
       authStatus:''
      };
    },
    created() {
         this.authStatus = this.$route.query.authStatus
         this.getModifiedMaterialFn()
    },
    methods: {
        getModifiedMaterialFn(){
          let id = this.$route.query.id
            getModifiedMaterial(id).then(res=>{
              if(res.code == 200){
                     this.infoData = res.data
                     this.flowIndex = res.data.length
                     this.flowItem = res.data[0]
                }else{
                     this.$message.error(res.msg);  
                    }    
            })
        },
        handleByMeans(item){
            let data ={
                 id:this.$route.query.id,
                 isApprove:item
            } 
            examineMaterial(data).then(res=>{
              if(res.code == 200){
                     this.$message.success('操作成功');
                }else{
                     this.$message.error(res.msg);  
                    }    
            })  
        },
        handleFlow(index){
           if( this.infoData[index] == '' || this.infoData[index]==null || this.infoData[index] == undefined){
               this.flowItem = ''
           }else{
               this.flowItem = this.infoData[index]   
           }
        },
        handleDownload(){
             window.open(this.flowItem.documentFileUrl)
        },
        goBackBtn(){
          this.$router.back()
        },
    }
  };
</script>
<style lang="scss" scoped>
         .display-fx-center{
             display: flex;
             align-items: center;
         }
         .materials-content{
              overflow-y: auto;
              position: relative;
              background-color: #fff;
              padding: 40px 20px;
              border-radius: 10px;
              height: calc( 100vh - 66px - 128px);
             .materialsBox{
                    max-width: 930px;
                    margin: 0 auto;
                    padding-bottom:40px;

              }
           .headerBox{
                font-size: 16px;
                color: #484848;
                font-weight: bold;
                // margin-top:40px;
                margin-bottom:15px;
                @extend .display-fx-center;
                .line{
                  width: 4px;
                  height: 12px;
                  background: #5D85FF;
                  border-radius: 6px 6px 6px 6px;
                  margin-right:6px;
                }
             }
            .flowBox{
                    color: #9FA2AC;
                    font-size: 14px;
                    @extend .display-fx-center; 
                .txt1{
                    font-size: 14px;
                    color: #484848;
                }
                .flow-item{
                  cursor: pointer;
                  @extend .display-fx-center;     
                }
                .image{
                    width: 20px;
                    height: 20px;
                    margin: 0 33px;
                }   
            }
            .download{
                   font-size: 14px;
                   color: #5D85FF;
                   height: 220px;
                  @extend .display-fx-center;
                  justify-content: center;
                  padding: 78px 0;
                  border: 1px solid #D3D8E2;
                  text-align: center;
                  margin-top:43px;
                 .image{
                    width: 40px;
                    height: 40px;
                 }
            }
          }
           .flowActive{
              color: #5D85FF!important;
           }
          .footer-btn{
                 width: 100%;
                 background: #FFFFFF;
                 height: 78px;
                 position: fixed;
                 bottom: 0;
                 right: 0;
                .btn{
                   position: fixed;
                   bottom: 20px;
                   right: 20px;    
                }
                 
          }
</style>
